<template>
	<el-form ref="patientFormRef" :model="patientForm" :rules="loginRules">
		<div class="divtext">患者信息</div>
		<div class="divhr"></div>
		<div class="divline">
			<el-form-item prop="username" class="divlineleft" label="姓名：">
				<el-input v-model="patientForm.userName"></el-input>
			</el-form-item>
			<el-form-item prop="usersex" class="divlineleft" label="性别：">
				<el-select v-model="patientForm.userSex">
					<el-option
					v-for="item in patientForm.sexlist"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item prop="userbirthday" class="divlineleft" label="出生日期：">
				<el-date-picker
					v-model="patientForm.userBirthday"
					type="datetime"
				/>
			</el-form-item>
			<el-form-item prop="userage" class="divlineleft" label="年龄：">
				<el-input v-model="patientForm.userAge"></el-input>
			</el-form-item>
		</div>
		<div class="divline">
			<el-form-item prop="usercard" class="divlineleft" label="身份证号：">
				<el-input v-model="patientForm.userCard"></el-input>
			</el-form-item>
			<el-form-item prop="socialnum" class="divlineleft" label="社保卡号：">
				<el-input v-model="patientForm.socialNum"></el-input>
			</el-form-item>
			<el-form-item prop="patienttype" class="divlineleft" label="患者类型：">
				<el-select v-model="patientForm.patientType">
					<el-option
					v-for="item in patientForm.patientlist"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item prop="visitnum" class="divlineleft" label="就诊卡号：">
				<el-input v-model="patientForm.visitNum"></el-input>
			</el-form-item>
		</div>
		<div class="divline">
			<el-form-item prop="usertel" class="divlineleft" label="联系电话：">
				<el-input v-model="patientForm.userTel"></el-input>
			</el-form-item>
			<el-form-item prop="useraddr" class="divlinecol" label="详细地址：">
				<el-input v-model="patientForm.userAddr"></el-input>
			</el-form-item>
		</div>
		<div class="divlinespac"></div>
		<div class="divtext">挂号信息</div>
		<div class="divhr"></div>
		<div class="divline">
			<el-form-item prop="registerdept" class="divlineleft" label="挂号科室：">
				<el-input v-model="patientForm.registerDept" @click="addOrUpdateHandle()"></el-input>
			</el-form-item>
			<el-form-item prop="outpatienttype" class="divlineleft" label="门诊类型：">
				
				<el-select v-model="patientForm.outpatientType">
					<el-option
					v-for="item in patientForm.typelist"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item prop="seedoctor" class="divlineleft" label="接诊医生：">
				<el-input v-model="patientForm.seeDoctor" @click="addUserHandle()"></el-input>
			</el-form-item>
			<el-form-item prop="costmoney" class="divlineleft" label="挂号费：">
				<el-input v-model="patientForm.costMoney"></el-input>
			</el-form-item>
		</div>
		<div class="divline">
			<el-form-item prop="viewstate" class="divlineleft" label="就诊状态：">
				<el-select v-model="patientForm.viewState">
					<el-option
					v-for="item in patientForm.statelist"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item prop="startcase" class="divlinecolt" label="初步诊断：">
				<el-input v-model="patientForm.startCase" @click="addDiagnosisHandle()"></el-input>
			</el-form-item>
		</div>
		<div class="divline-btn">
			<el-form-item class="divline-button-left">
				<el-button type="primary" @click="submitHandle()">确认挂号</el-button>
			</el-form-item>
			<el-form-item class="divline-button-right">
				<el-button type="primary" @click="clearform()">取消挂号</el-button>
			</el-form-item>
		</div>
		<!-- <el-form-item class="login-button">
			<el-button type="primary" @click="onLogin()">{{ $t('app.registerIn') }}</el-button>
		</el-form-item> -->
	</el-form>
	<!-- 弹窗, 新增 / 修改 -->
	<datalistUser ref="datalistUserRef" @fatherMethod="fatherMethod"></datalistUser>
	<!-- 弹窗, 新增 / 修改 -->
	<listUser ref="listUserRef" @fatherUserMethod="fatherUserMethod"></listUser>
	<!-- 弹窗, 新增 / 修改 -->
	<listDiagnosis ref="listDiagnosisRef" @fatherDiaMethod="fatherDiaMethod"></listDiagnosis>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import store from '@/store'
import {usePatientSubmitApi} from '@/api/sys/patient'
import {useUserSaveApi } from '@/api/sys/user'
import { useSendCodeApi } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { validateMobile } from '@/utils/validate'
import { ElMessage } from 'element-plus'
import datalistUser from './datalist.vue'
import listUser from './userlist.vue'
import listDiagnosis from './diagnosislist.vue'
const router = useRouter()
const { t } = useI18n()
const patientFormRef = ref()

const patientForm = reactive({
	id:"",
	userName:'',//姓名
	userSex:'',//性别
	userBirthday:'',//出生日期
	userAge:'',//年龄
	userCard:'',//身份证号
	socialNum:'',//社保卡号
	patientType:'',//患者类型
	visitNum:'',//就诊卡号
	userTel:'',//联系电话
	userAddr:'',//详细地址
	registerDept:'',//挂号科室
	outpatientType:'',//门诊类型
	seeDoctor:'',//接诊医生
	costMoney:'',//挂号费
	viewState:'',//就诊状态
	startCase:'',//初步诊断
	orgId:'',//组织id,
	registerId:'',
	doctorId:'',
	caseId:'',
	typelist:[
		{
			value: '普通门诊',
    		label: '普通门诊',
		},
		{
			value: '急诊',
    		label: '急诊',
		},
		{
			value: '专家门诊',
    		label: '专家门诊',
		},
		{
			value: '免费门诊',
    		label: '免费门诊',
		}
	],
	sexlist:[
		{ 
			value: '男',
    		label: '男',
		},
		{ 
			value: '女',
    		label: '女',
		}
	],
	patientlist:[
		{ 
			value: '自费',
    		label: '自费',
		},
		{ 
			value: '医保',
    		label: '医保',
		}
	],
	statelist:[
		{ 
			value: '一般',
    		label: '一般',
		},
		{ 
			value: '急',
    		label: '急',
		},
		{ 
			value: '危',
    		label: '危',
		},
		{ 
			value: '其他',
    		label: '其他',
		}
	],
})
const clearform=()=>{
	
	patientForm.userName="";
	patientForm.userSex="";
	patientForm.userBirthday="";
	patientForm.userAge="";
	patientForm.userCard="";
	patientForm.socialNum="";
	patientForm.patientType="";
	patientForm.visitNum="";
	patientForm.userTel="";
	patientForm.userAddr="";
	patientForm.registerDept="";
	patientForm.outpatientType="";
	patientForm.seeDoctor="";
	patientForm.costMoney="";
	patientForm.viewState="";
	patientForm.startCase="";
}
const loginRules = ref({
	userName: [{ required: true, message: t('required'), trigger: 'blur' }],
	userSex: [{ required: true, message: t('required'), trigger: 'blur' }],
	userBirthday: [{ required: true, message: t('required'), trigger: 'blur' }],
	userAge: [{ required: true, message: t('required'), trigger: 'blur' }],
	userCard: [{ required: true, message: t('required'), trigger: 'blur' }],
	socialNum: [{ required: true, message: t('required'), trigger: 'blur' }],
	userTel: [{ required: true, message: t('required'), trigger: 'blur' }],
	userAddr: [{ required: true, message: t('required'), trigger: 'blur' }],
	registerDept: [{ required: true, message: t('required'), trigger: 'blur' }],
	outpatientType: [{ required: true, message: t('required'), trigger: 'blur' }],
	seeDoctor: [{ required: true, message: t('required'), trigger: 'blur' }],
	costMoney: [{ required: true, message: t('required'), trigger: 'blur' }],
	viewState: [{ required: true, message: t('required'), trigger: 'blur' }],
	startCase: [{ required: true, message: t('required'), trigger: 'blur' }]
})

const datalistUserRef = ref()
const addOrUpdateHandle = () => {
	datalistUserRef.value.init();
}
const fatherMethod=(orgTit:any,org:any)=>{
	patientForm.registerDept=orgTit;
	patientForm.registerId=org;
}

const listUserRef = ref()
const addUserHandle = () => {
	listUserRef.value.init();
}

const listDiagnosisRef = ref()
const addDiagnosisHandle = () => {
	listDiagnosisRef.value.init();
}
const fatherUserMethod=(realName:any,uid:any)=>{
	patientForm.seeDoctor=realName;
	patientForm.doctorId=uid;
}
const fatherDiaMethod=(diaName:any,diaId:any)=>{
	patientForm.startCase=diaName;
	patientForm.caseId=diaId;
}
// 表单提交
const submitHandle = () => {
	let orgCd:any=localStorage.getItem('org');
	patientForm.orgId=orgCd;
	patientFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		usePatientSubmitApi(patientForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500
			})
			clearform();
		})
	})
}
</script>

<style lang="scss" scoped>
.divline {
	width: 96%;
	height: 30px;
	float: left;
	margin-top: 20px;
}
.divline-btn{

	width: 96%;
	height: 30px;
	float: left;
	margin-top: 50px;
	text-align: center;
}
.divline-button{
	width: 96%;
	height: 30px;
	margin: 0px auto;
}
.divlinespac{
	
	width: 96%;
	height: 30px;
	float: left;
}
.divlineleft{
	width: 23%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecol{
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecolt{
	
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divtext{
	width: 100%;
	height: 30px;
	float: left;
	padding-left: 10px;
	font-weight: bold;
}
.divhr{
	width: 95%;
	height: 0.5px;
	background-color: #409Eff;
	float: left;
}
.divline-button-left {
	width: 100px;
	height: 30px;
	margin-left: 40%;
	float: left;
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100px;
		height: 30px;
		font-size: 13px;
	}
}
.divline-button-right {
	width: 100px;
	height: 30px;
	float: left;
	margin-left: 20px;
	:deep(.el-button--primary) {
		margin-top: 10px;
		background-color: red;
		width: 100px;
		height: 30px;
		font-size: 13px;
		border: 0px;
	}
}
</style>
